  <template>
  <view class="container">
    <up-toast ref="uToastRef"></up-toast>
    
    <!-- 加载状态显示 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner">
        <view class="loading-bounce"></view>
      </view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <template v-else>
      <!-- 联系方式弹窗 -->
    <up-popup mode="center" :show="showService" :closable="true" @close="showService = false" round="20">
        <view class="service-content">
          <view class="service-title">联系方式</view>
          <view class="service-list">
            <view class="service-item">
              <text class="service-label">微信号码</text>
              <view class="service-value">
              <text>{{ product.serviceWechat }}</text>
              <up-copy :content="product.serviceWechat">
                  <text class="service-btn copy-btn">复制</text>
              </up-copy>
            </view>
          </view>
            <view class="service-item">
              <text class="service-label">手机号码</text>
              <view class="service-value">
              <text>{{ product.servicePhone }}</text>
                <text class="service-btn call-btn" @click="makePhoneCall(product.servicePhone)">呼叫</text>
            </view>
          </view>
        </view>
      </view>
    </up-popup>

      <!-- 商品参数弹窗 -->
      <up-popup mode="bottom" :show="showParams" :closable="true" @close="showParams = false" round="15">
        <view class="params-content">
          <view class="params-title">商品参数</view>
          <scroll-view scroll-y class="params-scroll">
            <view class="params-item" v-for="(value,key) in product.selectedParameter" :key="key">
              <view class="params-label">{{ key }}</view>
              <view class="params-value">{{ value }}</view>
        </view>
          </scroll-view>
      </view>
    </up-popup>
      
      <!-- 分享弹窗 -->
      <up-popup mode="bottom" :show="showShare" :closable="true" @close="showShare = false" round="15">
        <view class="share-popup">
          <view class="share-header">
            <text class="share-title">分享商品</text>
            <text class="share-subtitle">把这款好物分享给好友吧</text>
          </view>
          <view class="share-options">
            <view class="share-option" @click="shareToApp('wechat')">
              <view class="share-icon wechat">
                <uni-icons type="weixin" size="30" color="#fff"></uni-icons>
              </view>
              <text class="share-label">微信</text>
            </view>
            <view class="share-option" @click="shareToApp('qq')">
              <view class="share-icon qq">
                <uni-icons type="qq" size="30" color="#fff"></uni-icons>
              </view>
              <text class="share-label">QQ</text>
            </view>
            <view class="share-option" @click="shareToApp('weibo')">
              <view class="share-icon weibo">
                <uni-icons type="weibo" size="30" color="#fff"></uni-icons>
              </view>
              <text class="share-label">微博</text>
            </view>
            <view class="share-option" @click="copyShareLink">
              <view class="share-icon link">
                <uni-icons type="link" size="30" color="#fff"></uni-icons>
              </view>
              <text class="share-label">复制链接</text>
            </view>
          </view>
          <view class="share-product-preview">
            <image class="preview-image" :src="shareImage" mode="aspectFill"></image>
            <view class="preview-info">
              <text class="preview-title">{{ shareTitle }}</text>
              <text class="preview-price">¥{{ product.sellingPrice }}起</text>
            </view>
          </view>
          <view class="share-cancel" @click="showShare = false">取消</view>
        </view>
      </up-popup>

      <!-- 轮播图区域 -->
      <view class="carousel-section">
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="nav-bar">
          <view class="back-btn" @click="goBack">
            <uni-icons type="left" size="20" color="#fff"></uni-icons>
          </view>
          <view class="indicator">
            <text class="current">{{ currentSwiperIndex + 1 }}</text>
            <text class="separator">/</text>
            <text class="total">{{ imgList.length }}</text>
          </view>
        </view>
        <swiper 
          class="carousel" 
          circular 
          @change="onSwiperChange" 
          duration="400" 
          indicator-dots 
          indicator-color="rgba(255,255,255,0.4)"
          indicator-active-color="#e84d1c">
        <swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
            <image
                :src="item.src"
              class="carousel-image"
                mode="aspectFill"
              @click="previewImage(index)"
            />
        </swiper-item>
      </swiper>
    </view>

      <!-- 商品信息区 -->
      <view class="product-info-section">
        <view class="price-row">
      <view class="price-box">
            <text class="price-symbol">¥</text>
            <text class="price-value">{{ product.sellingPrice }}</text>
            <text class="price-unit">起</text>
      </view>
          <view class="share-btn" @click="showShare = true">
            <uni-icons type="redo" size="24" color="#999"></uni-icons>
          </view>
        </view>
        <view class="title">{{ product.productName }}</view>
        <view class="subtitle">{{ product.subtitle }}</view>
        <view class="stats-row">
          <view class="stats-item">
            <text class="stats-value">{{ product.saleCount }}</text>
            <text class="stats-label">销量</text>
          </view>
          <view class="stats-item">
            <text class="stats-value">{{ product.stock }}</text>
            <text class="stats-label">库存</text>
          </view>
      </view>
    </view>

      <!-- 商品分割条 -->
      <view class="divider"></view>

      <!-- 操作卡片区 -->
      <view class="action-cards">
        <view class="action-card" @click="showParams = true">
          <view class="action-left">
            <text class="action-title">商品参数</text>
          </view>
          <view class="action-right">
            <text class="action-text">查看详情</text>
            <uni-icons type="right" size="14" color="#bbb"></uni-icons>
          </view>
    </view>

        <view class="action-card" @click="showService = true">
          <view class="action-left">
            <text class="action-title">联系客服</text>
      </view>
          <view class="action-right">
            <text class="action-text">咨询商品</text>
            <uni-icons type="right" size="14" color="#bbb"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 商品详情区 -->
      <view class="detail-section">
        <view class="detail-header">
          <view class="detail-title">
            <view class="title-line"></view>
            <text>商品详情</text>
            <view class="title-line"></view>
          </view>
        </view>
        <view class="detail-content">
      <rich-text :nodes="content"></rich-text>
        </view>
    </view>

      <!-- 页面底部安全区 -->
      <view class="safe-bottom"></view>

    <!-- 底部操作菜单 -->
    <view class="page-bottom">
        <view class="bottom-btns">
          <view class="bottom-btn" @click="navTo('/pages/index')">
            <view class="icon-box">
              <uni-icons type="home" size="22" color="#666"></uni-icons>
            </view>
            <text class="btn-label">首页</text>
          </view>
          <view class="bottom-btn" @click="navTo('/pages/sellment/cart/index')">
            <view class="icon-box">
              <uni-icons type="cart" size="22" color="#666"></uni-icons>
            </view>
            <text class="btn-label">购物车</text>
          </view>
          <view class="bottom-btn" @click="showService = true">
            <view class="icon-box">
              <uni-icons type="headphones" size="22" color="#666"></uni-icons>
            </view>
            <text class="btn-label">客服</text>
          </view>
      </view>

        <view class="action-btns">
          <button 
            class="action-btn add-cart-btn" 
            @click="toggleSpec('addCart')"
            hover-class="btn-hover"
          >
            加入购物车
        </button>
          <button 
            class="action-btn buy-now-btn" 
            @click="toggleSpec('buy')"
            hover-class="btn-hover"
          >
            立即购买
          </button>
      </view>
    </view>

    <!-- 规格-模态层弹窗 -->
    <view
        class="spec-popup"
        :class="specClass"
        @touchmove.stop.prevent="stopPrevent"
        @click="toggleSpec"
    >
      <!-- 遮罩层 -->
        <view class="spec-mask"></view>
        <view class="spec-content" @click.stop="stopPrevent">
          <view class="spec-header">
            <view class="spec-image" @click="previewSpecImage(specSelected.specImageUrl)">
              <image mode="aspectFill" :src="specSelected.specImageUrl"></image>
            </view>
            <view class="spec-info">
              <view class="spec-price">¥{{ specSelected.amount }}</view>
              <view class="spec-stock">
                <view class="quantity-selector">
                  <up-number-box 
                    inputWidth="60" 
                    :min="specSelected.stock > 0 ? 1: 0"
                                 :max="specSelected.stock"
                                 v-model="specSelected.buyQuantity"
                    :disabled="specSelected.stock <= 0"
                  />
                </view>
                <view class="stock-info">
                  {{ specSelected.stock > 0 ? '库存：' + specSelected.stock : '无货' }}
              </view>
            </view>
              <view class="selected-spec" v-if="specSelected.name">
                已选：{{ specSelected.name }}
          </view>
            </view>
            <view class="close-btn" @click.stop="toggleSpec">
              <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
            </view>
          </view>
          
          <scroll-view scroll-y class="spec-list">
            <view v-for="(item,index) in specList" :key="index" class="spec-group">
              <view class="spec-group-title">{{ item.name }}</view>
              <view class="spec-options">
              <view
                  v-for="(childItem, childIndex) in specChildList"
                  v-show="childItem.pid === item.id"
                  :key="childIndex" 
                  class="spec-option"
                  :class="{
                    'spec-selected': childItem.selected,
                    'spec-disabled': childItem.stock === 0
                  }"
                  @click="selectSpec(childIndex, childItem.pid)"
              >
                  <image class="option-image" :src="childItem.specImageUrl" @click.stop="previewSpecImage(childItem.specImageUrl)"></image>
                  <text class="option-name">{{ childItem.name }}</text>
                  <view class="stock-tag" v-if="childItem.stock === 0">无货</view>
                </view>
              </view>
            </view>
          </scroll-view>
          
          <view class="spec-footer">
            <button 
              v-if="isBuy" 
              :disabled="specSelected.stock === 0" 
              class="spec-btn buy-btn" 
              :class="{'disabled': specSelected.stock === 0}"
              @click="buy"
            >
              立即购买
            </button>
            <button 
              v-else 
              :disabled="specSelected.stock === 0" 
              class="spec-btn cart-btn"
              :class="{'disabled': specSelected.stock === 0}"
              @click="addCart"
            >
              加入购物车
            </button>
          </view>
      </view>
    </view>
    </template>
  </view>
</template>

<script>
import share from '@/components/share';
import {getProduct} from "@/api/sell/product";
import {listByIds} from "@/api/system/oss";
import {addCart} from "@/api/sell/cart";
import useUserStore from "@/store/modules/user";
import {getToken} from "@/utils/auth";
import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';

export default {
  components: {
    share,
    UniIcons
  },
  data() {
    return {
      showParams: false,
      showService: false,
      showShare: false,
      specClass: 'none',
      specSelected: {},
      product: {},
      favorite: false,
      shareList: [],
      imgList: [],
      specList: [],
      specChildList: [],
      isBuy: false,
      productId: '',
      content: '',
      currentSwiperIndex: 0,
      statusBarHeight: 20,
      isLoading: true, // 添加加载状态
    };
  },
  computed: {
    hasLogin() {
      return getToken()
    },
    shareLink() {
      // 构建分享链接
      return location.origin + "/pages/sellment/product/product?id=" + this.productId;
    },
    shareTitle() {
      // 构建分享标题
      return this.product.productName;
    },
    shareDesc() {
      // 构建分享描述
      return this.product.subtitle || `仅需${this.product.sellingPrice}元起`;
    },
    shareImage() {
      // 获取分享图片
      return this.imgList.length > 0 ? this.imgList[0].src : '';
    }
  },
  async onLoad(options) {
    this.productId = options.id;
    // 获取状态栏高度
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight;
      }
    });
  },
  async onShow() {
    // 设置加载状态为true
    this.isLoading = true;
    
    // 添加适当的延迟以展示加载动画
    setTimeout(async () => {
      try {
        const {data} = await getProduct(this.productId);
    this.product = data;
    const richtext = data.productDetail;
    const regex = new RegExp('<img', 'gi');
    this.content = richtext.replace(regex, '<img style="max-width: 100%;"');

    await this.buildAlbum();
    await this.buildSpecImages();
        this.buildSpec();
      } catch (error) {
        console.error('加载商品数据失败:', error);
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    }, 600); // 600ms延迟以展示加载效果
  },
  onBackPress() {
    if (this.specClass !== 'none') {
      this.closeSpec();
      return true;
    }
    return false;
  },
  methods: {
    // 轮播图变化事件
    onSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },
    
    // 预览图片
    previewImage(index) {
      const urls = this.imgList.map(item => item.src);
      uni.previewImage({
        current: index,
        urls: urls,
        indicator: 'number',
        loop: true
      });
    },
    
    // 预览规格图片
    previewSpecImage(imageUrl) {
      if (!imageUrl) return;
      // 收集所有规格图片
      const specImages = this.specChildList.map(item => item.specImageUrl).filter(url => url);
      uni.previewImage({
        current: imageUrl,
        urls: specImages,
        indicator: 'number',
        loop: true
      });
    },
    
    // 分享到应用
    shareToApp(platform) {
      // 实际环境中，这里会调用原生分享API
      // 在H5环境中模拟分享行为
      uni.showToast({
        title: `已分享到${platform === 'wechat' ? '微信' : platform === 'qq' ? 'QQ' : '微博'}`,
        icon: 'none'
      });
      this.showShare = false;
      
      // 使用uni.share API (在APP环境下)
      /*
      uni.share({
        provider: platform,
        type: 0,
        title: this.shareTitle,
        summary: this.shareDesc,
        imageUrl: this.shareImage,
        href: this.shareLink,
        success: (res) => {
          console.log("分享成功:", res);
          this.showShare = false;
        },
        fail: (err) => {
          console.error("分享失败:", err);
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          });
        }
      });
      */
    },
    
    // 复制分享链接
    copyShareLink() {
      uni.setClipboardData({
        data: this.shareLink,
        success: () => {
          uni.showToast({
            title: '链接已复制，快去分享吧！',
            icon: 'none'
          });
          this.showShare = false;
        }
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    async buildSpecImages() {
      const images = this.product.specificationList.map(({specImage}) => specImage).join(',');
      const {data} = await listByIds(images);
      this.product.specificationList.forEach(item => {
        item.url = data.find(dataItem => dataItem.ossId === item.specImage)?.url || '';
      })
    },
    async buildAlbum() {
      const {data} = await listByIds(this.product.album);
      this.imgList = data.map(item => ({
        src: item.url
      }));
    },
    buildSpec() {
      this.specList = []
      this.specList.push({
        id: 1,
        name: '商品型号'
      })
      this.specChildList = []
      for (let i = 0; i < this.product.specificationList.length; i++) {
        this.specChildList.push({
          id: this.product.specificationList[i].id,
          stock: this.product.specificationList[i].specStock,
          amount: this.product.specificationList[i].specAmount,
          specImage: this.product.specificationList[i].specImage,
          specImageUrl: this.product.specificationList[i].url,
          pid: 1,
          name: this.product.specificationList[i].specName
        })
      }

      // 默认选中第一个有库存的规格
      const firstAvailableSpec = this.specChildList.find(spec => spec.stock > 0) || this.specChildList[0];
      this.specChildList.forEach(spec => {
        this.$set(spec, 'selected', spec.id === firstAvailableSpec.id);
      });
      this.specSelected = firstAvailableSpec;
        this.specSelected.buyQuantity = this.specSelected.stock > 0 ? 1 : 0;
    },
    // 关闭规格弹窗并重置状态
    closeSpec() {
      this.specClass = 'hide';
      setTimeout(() => {
        this.specClass = 'none';
        // 重置规格选择状态
        this.isBuy = false;
        this.buildSpec(); // 重新构建规格选择，确保有默认选中项
      }, 250);
    },
    //规格弹窗开关
    toggleSpec(type) {
      if (type === 'buy') {
        this.isBuy = true;
      } else if (type === 'addCart') {
        this.isBuy = false;
      }
      if (this.specClass === 'show') {
        this.closeSpec();
      } else if (this.specClass === 'none') {
        this.specClass = 'show';
        // 确保有规格被选中
        if (!this.specSelected || Object.keys(this.specSelected).length === 0) {
          this.buildSpec();
        }
      }
    },
    //选择规格
    selectSpec(index, pid) {
      let list = this.specChildList;
      
      // 允许选择无货规格，只有在操作购买相关按钮时才检查库存
      list.forEach(item => {
        if (item.pid === pid) {
          this.$set(item, 'selected', false);
        }
      })

      this.$set(list[index], 'selected', true);
      //存储已选择
      this.specSelected = list[index]
      this.specSelected.buyQuantity = this.specSelected.stock > 0 ? 1 : 0;
    },
    //分享
    share() {
      this.showShare = true;
    },
    buy() {
      if (this.specSelected.stock <= 0) {
        this.$modal.msgError("该型号无库存");
        return;
      }
      
      if (!this.hasLogin) {
        this.$confirmDialog.confirm('用户未登录，立即登录？').then(() => {
          uni.navigateTo({
            url: '/pages/login'
          });
        })
        return;
      }
      if (!this.specSelected) {
        this.$modal.msgError("请选择商品")
        return;
      }

      this.globalData.goodsList = [{
        id: this.specSelected.id,
        productId: this.product.id,
        itemName: this.product.productName,
        name: this.specSelected.name,
        images: this.specSelected.specImage,
        buyQuantity: this.specSelected.buyQuantity,
        sellingPrice: this.specSelected.amount,
      }]
      uni.navigateTo({
        url: `/pages/sellment/order/createOrder`
      })
    },
    stopPrevent() {
    },
    addCart() {
      if (this.specSelected.stock <= 0) {
        this.$modal.msgError("该型号无库存");
        return;
      }
      
      if (!this.hasLogin) {
        this.$confirmDialog.confirm('用户未登录，立即登录？').then(() => {
          uni.navigateTo({
            url: '/pages/login'
          });
        })
        return;
      }
      if (!this.specSelected) {
        this.$modal.msgError("请选择商品")
        return;
      }
      
      // 添加成功前的视觉反馈
      uni.showLoading({
        title: '正在添加...',
        mask: true
      });
      
      addCart({
        specId: this.specSelected.id,
        productId: this.product.id,
        quantity: this.specSelected.buyQuantity,
        amount: Number(this.specSelected.amount) * Number(this.specSelected.buyQuantity),
        unitPrice: this.specSelected.amount,
        images: this.specSelected.specImage,
      }).then(res => {
        uni.hideLoading();
        this.$modal.msgSuccess('添加成功');
        // 不再关闭规格弹窗，允许用户继续选择
        // this.toggleSpec();
      }).catch(msg => {
        uni.hideLoading();
        this.$refs.uToastRef.show({
          type: 'default',
          title: '添加失败',
          message: msg,
        })
      })
    },
    makePhoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    // 统一导航方法
    navTo(url) {
      if (url.includes('/pages/index') || url.includes('/pages/sellment/cart/index')) {
        uni.reLaunch({
          url: url
        });
      } else {
        uni.navigateTo({
          url: url
        });
      }
    },
  },
}
</script>

<style lang='scss' scoped>
/* 品牌颜色变量 */
$primary-color: #e84d1c;
$primary-light: #f06e44;
$primary-gradient: linear-gradient(90deg, $primary-color, $primary-light);
$primary-gradient-v: linear-gradient(180deg, $primary-color 0%, $primary-light 100%);
$text-color-dark: #333;
$text-color-medium: #666;
$text-color-light: #999;
$border-color: #eee;
$bg-color: #f5f5f5;

page {
  background-color: #f7f7f7;
  color: $text-color-dark;
  font-size: 28rpx;
  padding-bottom: 160rpx;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 加载动画样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: white;
  animation: fadeIn 0.5s ease-out;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
  position: relative;
    margin-bottom: 20rpx;

    .loading-bounce {
      width: 100%;
    height: 100%;
      border-radius: 50%;
      background-color: rgba(232, 77, 28, 0.6);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: bounce 2s infinite ease-in-out;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
    width: 100%;
    height: 100%;
        border-radius: 50%;
        background-color: rgba(232, 77, 28, 0.6);
        opacity: 0.6;
        animation: bounce 2s infinite ease-in-out;
        animation-delay: -1.0s;
      }
    }
  }
  
  .loading-text {
    color: #999;
    font-size: 28rpx;
  }
}

@keyframes bounce {
  0%, 100% { transform: scale(0); }
  50% { transform: scale(1.0); }
}

/* 服务弹窗样式 */
.service-content {
  padding: 30rpx 40rpx;
  width: 500rpx;
  
  .service-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 30rpx;
    color: $text-color-dark;
  }
  
  .service-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
  }
  
  .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .service-label {
      font-size: 26rpx;
      color: $text-color-medium;
      width: 160rpx;
    }
    
    .service-value {
      flex: 1;
      font-size: 26rpx;
      color: $text-color-dark;
      text-align: right;
      display: flex;
    align-items: center;
      justify-content: flex-end;
      gap: 16rpx;
      
      .service-btn {
        display: block;
        background: $primary-gradient;
        color: white;
        font-size: 22rpx;
        padding: 6rpx 0;
        border-radius: 30rpx;
        white-space: nowrap;
        min-width: 80rpx;
        width: 80rpx;
        text-align: center;
      }
    }
  }
}

/* 参数弹窗样式 */
.params-content {
  padding: 30rpx;
  max-height: 60vh;
    display: flex;
  flex-direction: column;
  
  .params-title {
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30rpx;
    color: $text-color-dark;
  }
  
  .params-scroll {
      flex: 1;
    max-height: calc(60vh - 100rpx);
  }
  
  .params-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid $border-color;
    
    &:last-child {
      border-bottom: none;
    }
    
    .params-label {
      width: 200rpx;
      color: $text-color-medium;
      font-size: 28rpx;
    }
    
    .params-value {
      flex: 1;
      color: $text-color-dark;
      font-size: 28rpx;
    }
  }
}

/* 轮播图区域 */
.carousel-section {
  width: 100%;
  height: 750rpx;
    position: relative;
    overflow: hidden;
  
  .status-bar {
    width: 100%;
      position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
    height: var(--status-bar-height, 25px);
  }
  
  .nav-bar {
    position: absolute;
    top: calc(var(--status-bar-height, 25px) + 15rpx);
    left: 0;
    width: 100%;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    z-index: 10;
    
    .back-btn {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .indicator {
      background: rgba(0, 0, 0, 0.3);
      color: white;
      border-radius: 30rpx;
      padding: 8rpx 24rpx;
      font-size: 24rpx;
      
      .current {
        font-weight: bold;
      }
      
      .separator {
        margin: 0 8rpx;
        opacity: 0.8;
      }
      
      .total {
        opacity: 0.8;
      }
    }
  }
  
  .carousel {
    width: 100%;
    height: 750rpx;
    
    .swiper-item {
      width: 100%;
      height: 100%;
    }
    
    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* 商品信息区 */
.product-info-section {
  padding: 30rpx;
  background-color: white;
  border-radius: 30rpx 30rpx 0 0;
  margin-top: -40rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 -10rpx 20rpx rgba(0,0,0,0.03);
  
  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .price-box {
      display: flex;
      align-items: baseline;
    }
    
    .price-symbol {
      font-size: 34rpx;
      color: $primary-color;
      font-weight: bold;
      margin-right: 4rpx;
    }
    
    .price-value {
      font-size: 48rpx;
      color: $primary-color;
      font-weight: bold;
      line-height: 1;
    }
    
    .price-unit {
      font-size: 26rpx;
      color: $text-color-light;
      margin-left: 6rpx;
    }
    
    .share-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f9f9f9;
      
      &:active {
        background: #f5f5f5;
      }
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: $text-color-dark;
    line-height: 1.4;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: $text-color-light;
    line-height: 1.4;
    margin-bottom: 24rpx;
  }
  
  .stats-row {
  display: flex;
    margin-top: 20rpx;

    .stats-item {
    display: flex;
    align-items: center;
      margin-right: 40rpx;
      
      .stats-value {
        font-size: 28rpx;
        color: $text-color-dark;
        font-weight: 500;
        margin-right: 8rpx;
      }
      
      .stats-label {
        font-size: 24rpx;
        color: $text-color-light;
      }
    }
  }
}

/* 商品分割条 */
.divider {
  height: 16rpx;
  background-color: #f7f7f7;
  margin: 10rpx 0;
}

/* 操作卡片 */
.action-cards {
  background-color: white;
  padding: 10rpx 30rpx;
  
  .action-card {
  display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid $border-color;
    
    &:last-child {
      border-bottom: none;
    }
    
    .action-left {
    display: flex;
      align-items: center;
      
      .action-title {
        font-size: 28rpx;
        color: $text-color-dark;
        font-weight: 500;
      }
    }
    
    .action-right {
      display: flex;
      align-items: center;
      
      .action-text {
        font-size: 24rpx;
        color: $text-color-light;
        margin-right: 6rpx;
      }
    }
  }
}

/* 商品详情区 */
.detail-section {
  margin-top: 20rpx;
  background-color: white;
  padding-bottom: 40rpx;
  
  .detail-header {
    padding: 40rpx 0 20rpx;
    
    .detail-title {
    display: flex;
    align-items: center;
      justify-content: center;

    text {
        font-size: 32rpx;
        font-weight: bold;
        color: $text-color-dark;
        margin: 0 20rpx;
      }
      
      .title-line {
        width: 60rpx;
        height: 2rpx;
        background: linear-gradient(90deg, transparent, $primary-color, transparent);
      }
    }
  }
  
  .detail-content {
    padding: 0 30rpx;
    
    :deep(img) {
      width: 100% !important;
      height: auto !important;
      display: block;
      margin: 0 auto;
    }
  }
}

/* 底部安全区 */
.safe-bottom {
  height: 150rpx;
  background-color: #f7f7f7;
}

/* 底部操作菜单 */
.page-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
    display: flex;
  height: 110rpx;
  background: white;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  
  .bottom-btns {
    display: flex;
    width: 40%;
    border-right: 1rpx solid #f5f5f5;
    
    .bottom-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      
      .icon-box {
        width: 44rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8rpx;
      }
      
      .btn-label {
        font-size: 22rpx;
        color: $text-color-medium;
        line-height: 1;
        text-align: center;
      }
      
      &:active {
        background-color: #fafafa;
      }
    }
  }
  
  .action-btns {
    display: flex;
    width: 60%;
    
    .action-btn {
      flex: 1;
      height: 100%;
      border: none;
      font-size: 30rpx;
      color: white;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      letter-spacing: 2rpx;
      position: relative;
      overflow: hidden;
      
      &::after {
        content: '';
      position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
        pointer-events: none;
      }
      
      &.add-cart-btn {
        background: linear-gradient(135deg, #ff9500, #ff8000);
      }
      
      &.buy-now-btn {
        background: linear-gradient(135deg, #ff5500, $primary-color);
      }
      
      &.btn-hover {
        opacity: 0.9;
        transform: scale(0.98);
      }
    }
  }
}

/* 规格弹窗 */
.spec-popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;

  &.show {
    .spec-mask {
      animation: fadeIn 0.2s linear forwards;
    }
    
    .spec-content {
      animation: slideUp 0.3s ease forwards;
    }
  }

  &.hide {
    .spec-mask {
      animation: fadeOut 0.2s linear forwards;
    }

    .spec-content {
      animation: slideDown 0.3s ease forwards;
    }
  }

  &.none {
    display: none;
  }

  .spec-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
  }
  
  .spec-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    background-color: white;
    border-radius: 30rpx 30rpx 0 0;
    transform: translateY(100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    .spec-header {
      position: relative;
      padding: 30rpx;
      display: flex;
      border-bottom: 1rpx solid $border-color;
      
      .spec-image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 15rpx;
        overflow: hidden;
        margin-right: 24rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
        
        image {
    width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .spec-info {
        flex: 1;
      display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .spec-price {
          font-size: 40rpx;
          color: $primary-color;
          font-weight: bold;
          margin-bottom: 16rpx;
        }
        
        .spec-stock {
          display: flex;
      align-items: center;
          flex-wrap: wrap;
          margin-bottom: 12rpx;
          
          .quantity-selector {
            margin-right: 20rpx;
          }
          
          .stock-info {
            font-size: 24rpx;
            color: $text-color-light;
          }
        }
        
        .selected-spec {
          font-size: 24rpx;
          color: $text-color-medium;
        }
      }
      
      .close-btn {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
      }
    }
    
    .spec-list {
      flex: 1;
      padding: 0 30rpx 30rpx;
      max-height: calc(60vh - 240rpx);
      min-height: 240rpx;
      
      .spec-group {
        margin-top: 30rpx;
        
        .spec-group-title {
          font-size: 28rpx;
          color: $text-color-dark;
          font-weight: 500;
          margin-bottom: 20rpx;
        }
        
        .spec-options {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;
          
          .spec-option {
            min-width: 160rpx;
            height: 80rpx;
            border-radius: 10rpx;
            border: 1rpx solid #ddd;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            
            .option-image {
              width: 50rpx;
              height: 50rpx;
              border-radius: 6rpx;
              margin-right: 10rpx;
              object-fit: cover;
            }
            
            .option-name {
              font-size: 26rpx;
              color: $text-color-dark;
            }
            
            .stock-tag {
              position: absolute;
              top: 0;
              right: 0;
              background-color: rgba(0, 0, 0, 0.5);
              color: white;
              font-size: 20rpx;
              padding: 4rpx 12rpx;
              border-radius: 0 0 0 10rpx;
            }
            
            &.spec-selected {
              border-color: $primary-color;
              background-color: rgba($primary-color, 0.05);
              
              .option-name {
                color: $primary-color;
                font-weight: 500;
              }
            }
            
            &.spec-disabled {
              opacity: 0.7;
              background-color: #f5f5f5;
            }
          }
        }
      }
    }
    
    .spec-footer {
      padding: 20rpx 30rpx;
      border-top: 1rpx solid $border-color;
      
      .spec-btn {
        width: 100%;
        height: 80rpx;
        border-radius: 40rpx;
        color: white;
        font-size: 30rpx;
        font-weight: 500;
  display: flex;
        align-items: center;
  justify-content: center;
        
        &.buy-btn {
          background: linear-gradient(135deg, #ff5500, $primary-color);
        }
        
        &.cart-btn {
          background: linear-gradient(135deg, #ff9500, #ff8000);
        }
        
        &.disabled {
          background: #cccccc;
          opacity: 0.7;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

/* 分享弹窗样式 - 全面优化 */
.share-popup {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 30rpx;
  
  .share-header {
    display: flex;
    flex-direction: column;
  align-items: center;
    margin-bottom: 40rpx;
    
    .share-title {
      font-size: 34rpx;
      font-weight: 600;
      color: $text-color-dark;
      margin-bottom: 10rpx;
    }
    
    .share-subtitle {
      font-size: 26rpx;
      color: $text-color-light;
    }
  }
  
  .share-options {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 30rpx;
    padding: 0 20rpx;
    
    .share-option {
    display: flex;
    flex-direction: column;
      align-items: center;
      width: 120rpx;
      margin-bottom: 20rpx;
      position: relative;
      
      &:active {
        opacity: 0.8;
      }
      
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -10rpx;
        width: 60rpx;
        height: 4rpx;
        background-color: transparent;
        transition: background-color 0.2s;
      }
      
      &:active::after {
        background-color: $primary-color;
      }
      
      .share-icon {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        display: flex;
    align-items: center;
    justify-content: center;
        margin-bottom: 12rpx;
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;
        
        &:active {
          transform: scale(0.95);
        }
        
        &.wechat {
          background: linear-gradient(135deg, #3eb94e, #07c160);
        }
        
        &.qq {
          background: linear-gradient(135deg, #4facf0, #12b7f5);
        }
        
        &.weibo {
          background: linear-gradient(135deg, #fa5d5d, #e6162d);
        }
        
        &.link {
          background: linear-gradient(135deg, #ff9500, #ff8000);
        }
      }
      
      .share-label {
        font-size: 24rpx;
        color: $text-color-medium;
      }
    }
  }
  
  .share-product-preview {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 12rpx;
    padding: 16rpx;
    margin: 0 10rpx 30rpx;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 8rpx;
      height: 100%;
      background: linear-gradient(135deg, $primary-color, $primary-light);
    }
    
    .preview-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      background-color: #eee;
    }
    
    .preview-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      .preview-title {
        font-size: 28rpx;
        color: $text-color-dark;
        line-height: 1.4;
        margin-bottom: 8rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .preview-price {
        font-size: 24rpx;
        color: $primary-color;
        font-weight: 500;
      }
    }
  }
  
  .share-cancel {
    height: 90rpx;
    border-radius: 45rpx;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: $text-color-dark;
    font-weight: 500;
    
    &:active {
      background-color: #f0f0f0;
    }
  }
}
</style>

